<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>慧尔家</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <!--<meta http-equiv="refresh" content="100">--><!--每100秒自动定时刷新页面-->

    <script type="text/javascript" src="/pages/js/jquery.min.js"></script>
    <script type="text/javascript" src="/pages/js/amazeui.min.js"></script>


    <link rel="stylesheet" href="/pages/css/amazeui.min.css" type="text/css"/>
    <link rel="stylesheet" href="/pages/css/style.css" type="text/css"/>


</head>
<body>
<header data-am-widget="header" class="am-header am-header-default jz">
    <div class="am-header-left am-header-nav">
        <a href="javascript:history.back()" class="">
            <!-- <i class="am-icon-chevron-left"></i>-->
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="#title-link" class="">账号绑定</a>
    </h1>

</header>

<div class="logo"><img src="/pages/images/logo.png"/></div>

<div>

    <form id="loginForm">

        <input type="hidden" id="openId" th:value="${openId}">

        <input type="hidden" id="nickname" th:value="${nickname}">

        <input type="text" name="username" id="username" placeholder="输入手机号" class="login-name">


        <input type="text" name="checkCode" id="checkCode" placeholder="短信验证码" class="login-password"
               style="width:50%;">

        <button type="button" id="CheckCodeBtn"  class="money-btn"
                style="float:right;width:30%;">获取验证码</button>

        <input type="hidden" id="bindBtn"  value="绑定账号" class="money-btn">
        <!--<input type="hidden" id="bindBtn" disabled="disabled" value="绑定账号" class="money-btn">-->

    </form>
</div>


<script src="/pages/js/fastclick.js"></script>
<script src="/pages/js/layer.js"></script>
<script>

    var dateTime;
    /*防止点击延迟报错*/
    $(function() {
        FastClick.attach(document.body);
    });
    /*获取短信验证码*/
    $("#CheckCodeBtn").click(function () {
        sendCode($("#CheckCodeBtn"));
    });
    //用ajax提交到后台的发送短信接口
    function sendCode(obj) {
        var phone = $("#username").val();
        var result = isPhoneNum(phone);
        dateTime = (new Date()).valueOf();
        var data = {
            username: phone
            , dateTime: dateTime
        };
        if (result) {
            $.ajax({
                url: "/userDo/getCheckCode.do",
                contentType : "application/json",
                data:  JSON.stringify(data),
                dataType: "json",
                type: "post",
                //async: false,
                cache: false,
                success: function (response) {
                    // debugger;
                    var r = response;
                    if (r.code == 200) {

                        //$("#bindBtn").prop('disabled', false);//验证码发送成功后显示绑定按钮
                        $("#bindBtn").prop('type', 'button');
                        layer.open({
                            content: '验证码发送成功',
                            skin: 'footer',
                            time: 2
                        });
                        //alert("短信验证码发送成功！"+r.msg);  //测试写法
                    } else {
                        layer.open({
                            content: r.msg,
                            time: 3,
                            //shadeClose: false,
                            btn: '我知道了'
                        });
                    }
                },
                error: function () {
                    layer.open({
                        content: '网络异常，请检查网络！',
                        //shadeClose: false,
                        btn: '我知道了'
                    });

                }
            });
            setTime(obj);//开始倒计时
        }
    }

    //60s倒计时实现逻辑
    var countdown = 90;

    function setTime(obj) {
        if (countdown == 0) {
            obj.prop('disabled', false);
            obj.text("获取验证码");
            countdown = 90;//60秒过后button上的文字初始化,计时器初始化;
            return;
        } else {
            obj.prop('disabled', true);
            obj.text("(" + countdown + "s)重发");
            countdown--;
        }
        setTimeout(function () {
            setTime(obj)
        }, 1000) //每1000毫秒执行一次
    }

    //校验手机号是否合法
    function isPhoneNum(phonenum) {

        var reg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9]{1}))+\d{8})$/;
        if (!reg.test(phonenum)) {

            layer.open({
                title: ['提示', 'background-color:#8DCE16; color:#fff;'],
                content: '请输入正确的手机号码',
                shadeClose: false,
                time: 3,
                btn: ['确认']
            });
            return false;
        } else {
            return true;
        }
    }

    /*提交数据*/

    $("#bindBtn").click(function () {

        var username = $("#username").val();
        var checkCode = $("#checkCode").val();

        //正则表达式检查用户名和密码
        if (!(/^1[3456789]\d{9}$/.test(username))) {
            layer.open({
                content: '请输入正确的手机号码',
                time: 3,
                //shadeClose: false,
                btn: ['我知道了']
            });
            return false;
        }
        if (!(/^\d{6}$/.test(checkCode))) {
            layer.open({
                content: '验证码有误',
                time: 3,
                //shadeClose: false,
                btn: ['我知道了']
            });
            return false;
        }
        //检查是否发送过短信
        if (!dateTime) {
            layer.open({
                content: '还没有发送过验证码',
                time: 3,
                //shadeClose: false,
                btn: ['我知道了']
            });
            return false;
        }
        //验证码发送成功后显示绑定按钮
        //$("#bindBtn").prop('disabled', true);//使绑定按钮隐藏，避免重复点击
        $("#bindBtn").prop('type', 'hidden');
        //验证都都通过，发送数据提交请求
        //console.log("执行登陆流程");
        var data = {
            openId: $("#openId").val(),
            nickname: $("#nickname").val(),
            username: username,
            checkCode: checkCode,
        };

        login(data);

    });

    function login(data) {

        $.ajax({
            url: "/ajaxBind.do",
            data: JSON.stringify(data),
            contentType : "application/json",
            dataType: "json",
            type: "post",
            //async: false,
            cache: false,
            success: function (response) {

                var r = response;
                if (null != r.token && r.code === '1') {
                    // console.log("用户登陆绑定成功");
                    window.location.href = "/loginSuccess.action";//这里可以跳转到绑定成功页面
                } else {
                    //$("#bindBtn").prop('disabled', false);//显示绑定按钮
                    $("#bindBtn").prop('type', 'button');
                    layer.open({
                        content: r.msg,
                        time: 3,
                        //shadeClose: false,
                        btn: ['我知道了']
                    });
                }
            },
            error: function () {
                $("#bindBtn").prop('type', 'button');//显示绑定按钮
                layer.open({
                    content: '网络异常，请稍后再试',
                    time: 3,
                    //shadeClose: false,
                    btn: ['我知道了']
                });

            }
        });
    }

</script>

</body>
</html>
